<template>
  <div id="gq">
    <template v-for="item in perArr1">
          <router-link tag="div" class="list" :key="item.id" :to="`/play/${item.id}`">

        <!-- 右边 -->
        <div class="right">
          <!-- 内容 -->
          <div class="content">
            <p>{{ item.name }}</p>
            <span><i style="font-size:3px " class="iconfont icon-sq"></i> {{ item.ar[0].name }}-{{ item.al.name }} </span>
          </div>
          <!-- 播放 -->
          <i class="iconfont icon-bofang"></i>
        </div>
          </router-link>
    </template>
  </div>
</template>

<script>
export default {
  props: ["perArr1"],
};
</script>

<style lang="scss" scoped>
#gq {
  // display: flex;
  width: _vw(750);
  .list {
    display: flex;
    align-items: center;
    height: _vw(100);
    .right {
      font-size: _vw(32);
      width: _vw(750);
      height: _vw(100);
      border-bottom: 1px solid #ebebeb;
      display: flex;
      padding-right: _vw(20);
      padding-left: _vw(20);
      
      justify-content: space-between;
      align-items: center;
      .content {
        width: _vw(600);
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        span {
          font-size: _vw(20);
          color: #7e828b;
          i{
            position: relative;
            top: _vw(5);
          }
        }
      }
      i {
        color: #a9a9a9;
        font-size: _vw(45);
        color: red;
      }
    }
  }
}
</style>